元件中資料與事件的傳遞

• 如果在傳遞事件之前子元件還有一些內部的邏輯需要處理，也可以在子元件中包裝一個方法，在此方法內呼叫$emit進行事件傳遞，範例程式如下：

<div id="Application">
    <my-alert @myclick="appFunc" title="按鈕1"></my-alert>
    <my-alert @myclick="appFunc" title="按鈕2"></my-alert>
</div>

<script>
    const App = Vue.createApp({
        methods:{
            appFunc(param){
                console.log('點擊了自定義元件-'+param)
            }
        }
    })
    const alertComponent = {
        props:["title"],
        methods:{
            click(){
                console.log("元件內部的邏輯")
                this.$emit('myclick', this.title)
            }
        },
        template:'<div><button @click="click">{{title}}</button></div>'
    }
    App.component("my-alert",alertComponent)
    App.mount("#Application")
</script>

• 現在，可以靈活地透過事件的傳遞來使自定義元件的功能更加純粹，好的開發模式是將元件內部的邏輯在元件內部處理掉，而需要呼叫方處理的業務邏輯屬於元件外部的邏輯，將其傳遞到呼叫方處理。